import React from 'react';
import { List, Row, Col } from 'antd';
import styled from 'styled-components'
import Imgviewer from '../ImgViewer';

export const ListCard = styled(Row)`

`
export const ListCardItem = styled(Col)`
  height: ${props => props.types === 'small' ? '40px' : '50px'};
  text-align: ${props => props.types === 'small' ? 'left' : 'center'} !important;
  display: flex;
  align-items:  ${props => props.types === 'small' ? 'left' : 'center'};
  justify-content: space-around;
  flex-direction: column;
  padding: ${props => props.types === 'small' ? '0 10px' : '0 25px'};
  border:  ${props => props.types === 'small' ? '0' : '1px solid #eaeaea'};
  border-top: 0;
  border-right: 0;
  word-break: break-all;
  white-space: normal;
  font-size: 15px;
  color: rgba(0, 0, 0, .85);
  background: ${props => props.types === 'small' ? '#fff' : '#f0f6fa'};
`

export const ListCardItemV = styled(ListCardItem)`
  background: #fff;
  align-items: flex-start;
`

export type ColumnCount = 1 | 2 | 3 | 4 | 6 | 8 | 12 | 24;

interface Props {
  data: Array<IList>,
  step?: ColumnCount | number;
  type?: 'default' | 'small'
}

interface IList {
  name: string,
  value: string
}

const ListItem = List.Item;

class FormItem extends React.PureComponent<Props, any> {
  timeSlice = (value) => {
    return value ? value.slice(0, 10) : ''
  };

  multJoin = (arr) => {
    return Array.isArray(arr) ? arr.join(' ') : ''
  };

  multImg = (arr) => {
    const children = Array.isArray(arr) ? arr.map((it, index) => <Imgviewer key={index} hasText="查看图片" missText="暂无图片" url={it}/>) : null;
    return children
  };

  render() {

    const { data, step = 3, type = 'default' } = this.props;

    const colnum: ColumnCount = step <= 0 || step > data.length ? 3 : step;

    const value = { value: '', name: '' };
    const res = data.length % colnum === 0 
      ? 0 
      : colnum - data.length % colnum;

    let ans = [...data, ...(new Array(res).fill(value))]

    return (
      <div style={{ 
        borderTop: type === 'small' ? '0' : '1px solid #eaeaea', 
        borderRight: type === 'small' ? '0' : '1px solid #eaeaea' }}
      >
        <List
          grid={{
            gutter: 0, 
            xs: 1, sm: 2, md: 4, 
            lg: colnum, xl: colnum, xxl: colnum,
          }}
          dataSource={ans}
          renderItem={(item:any) => (
            <ListItem style={{margin: 0}}>
              <ListCard>
                <ListCardItem types={type} span={9}>{item.name}</ListCardItem>
                <ListCardItemV types={type} span={15}>
                  {item.func ? this[item.func](item.value) : item.value}
                </ListCardItemV>
              </ListCard>
            </ListItem>
          )}
        />
      </div>
    )
  }
}
export default FormItem
